<template>
  <van-nav-bar title="订单详情" :fixed="true" left-arrow @click-left="$router.push('/orders')"/>
  <div class="container mt46" v-if="orderDetailData.status">
    <div class="top">
        <p><span>订单状态：</span>{{orderDetailData.status}}</p>
        <p><span>订单编号：</span>{{orderDetailData.order_no}}</p>
        <p><span>下单时间：</span>{{orderDetailData.created_at}}</p>
        <van-button type="primary" size="large" @click="handlePay">去支付</van-button>
    </div>
    <div class="middle">
        <p><span>商品金额：</span>&yen;{{orderDetailData.amount}}</p>
        <p><span>配送方式：</span>{{orderDetailData.express_type}}</p>
    </div>
    <div class="foot">
        <van-card
        :title="orderDetailData.orderDetails.data[0].goods.title"
        :thumb="orderDetailData.orderDetails.data[0].goods.cover_url"
        :price="orderDetailData.orderDetails.data[0].goods.price"
        desc="全场包邮"
        :num="orderDetailData.orderDetails.data[0].num"
        >
      </van-card>
    </div>
  </div>
  <!-- 支付面板 -->
  <van-overlay :show="showPay" @click="showPay = false">
    <div class="wrapper" @click.stop>
      <h1>请使用支付宝支付</h1>
      <img :src="codeData.qr_code_url" alt="">
    </div>
  </van-overlay>

  <!-- <van-action-sheet v-model:show="showPay" title="支付宝二维码">
    <div class="content">
        <img :src="codeData.qr_code_url" alt="">
    </div>
  </van-action-sheet> -->
</template>
    
<script setup lang='ts'>
import { useRoute } from 'vue-router'
import { orderDetail, payCode } from '@/api/cart'
import { onMounted, ref } from 'vue';
import { Toast } from 'vant';

  const route = useRoute()
  let showPay = ref<boolean>(false)
  let codeData = ref<any>({})
  let orderDetailData = ref<any>({})
  //获取订单详情数据
  let getOrderDetailData = async () => {
    let list = {include: "user,orderDetails.goods"}
    let res = await orderDetail(Number(route.params.id),list)
    if(res.status === 200){
      orderDetailData.value = res.data
      // 订单状态
      switch (orderDetailData.value.status) {
        case 1:
        orderDetailData.value.status = "已下单"
            break
        case 2:
        orderDetailData.value.status = "已支付"
            break
        case 3:
        orderDetailData.value.status = "已发货"
            break
        case 4:
        orderDetailData.value.status = "已收货"
            break
        case 5:
        orderDetailData.value.status = "已过期"
            break
      }
      // 配送方式
      if(orderDetailData.value.express_type === null){
        orderDetailData.value.express_type = "未发货"
      }
    }
    
  }
  // 拉起支付方法 获取支付二维码
  let handlePay = async () => {
    let list = {type:"aliyun"}
    let res = await payCode(Number(route.params.id),list)
    if(res.status === 200){
      codeData.value = res.data
      showPay.value = true
    }else{
      showPay.value = false
      Toast.fail("服务器繁忙")
    }
    
  }
  onMounted(() => {
    getOrderDetailData()
  })
</script>
    
<style scoped lang="less">
.container {
  padding: 20px;
  .top,.middle {
    font-size: 15px;
    color: #2c3e50;
    p {
      margin-bottom: 10px;
      span {
        color: #999;
      }
    }
  }
  .middle {
    margin: 20px 0;
  }
  /deep/ .van-card {
    margin-top: 0;
    .van-card__thumb {
      margin-right: 30px;
    }
    .van-card__content {
      justify-content: flex-start;
    .van-card__title {
      font-size: 14px;
      font-weight: 700;
      margin-top: 5px;
    }
    .van-card__desc {
      margin: 10px 0;
      font-size: 12px;
    }
    .van-card__bottom {
      .van-card__price {
      font-size: 16px;
      color: #ff6a00;
      }
      .van-card__num {
      font-size: 14px;
      }
    }
  }
}
}
.wrapper {
  text-align: center;
  margin-top: 40%;
  background-color: #fff;
}
</style>